import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StatusBar,
    StyleSheet,
} from 'react-native';

import Press from './../Press';

import back_icon from './img/back.png';
import close_icon from './img/close_white.png';

import * as Const from './../../const';

import {
    Actions
} from 'react-native-router-flux';

import SafeAreaView from 'react-native-safe-area-view';

const height = 0 + 56;

export interface Props {
    style?:any,
    title: string,
    close:boolean,
    backShow:boolean,
    onBackPress: Function,
    renderLeft:Function
    renderRight:Function,
    renderCenter:Function
}

class Header extends PureComponent<Props> {

    static height = height;

    static defaultProps = {
        title:``,
        close:false,
        backShow:true,
        renderLeft:() => null,
        renderRight: () => null,
        renderCenter:() => null,
        onBackPress: () => Actions.pop()
    }

    private onBackPress = () => {
        const {
            onBackPress
        } = this.props;
        onBackPress();
    }

    render() {
        const {
            title,
            style,
            close,
            backShow,
            renderLeft,
            renderRight,
            renderCenter
        } = this.props;

        const _left = renderLeft();
        const _right = renderRight();
        const _center = renderCenter();

        return (
            <SafeAreaView
                forceInset={{bottom:'never'}}
                style={[styles.container,style]}
            >
                <StatusBar barStyle="light-content"/>
                <View style={styles.contentView}>
                    <View style={styles.content}>
                        {!!_left ? _left : (
                            backShow ? (
                                <Press
                                    onPress={this.onBackPress}
                                    style={styles.backButton}
                                    source={close?close_icon:back_icon}
                                />
                            ) : null
                        )}
                        {!!_center ? _center:(
                            <View style={styles.centerContent}>
                                <Text style={styles.title}>
                                    {title}
                                </Text>
                            </View>
                        )}
                        {!!_right && (
                            <View style={styles.rightStyle}>
                                {_right}
                            </View>
                        )}
                    </View>
                </View>
            </SafeAreaView>
        )
    }
}

export default Header;


const styles = StyleSheet.create({
    container: {
        backgroundColor:Const.color
    },
    contentView:{
        height: height
    },
    content: {
        flex: 1,
        flexDirection: `row`
    },
    backButton: {
        left: 0,
        height: `100%`,
        zIndex: 10,
        position: `absolute`,
        paddingHorizontal: 18,
        alignItems: `center`,
        justifyContent: `center`
    },
    centerContent: {
        flex: 1,
        alignItems: `center`,
        justifyContent: `center`
    },
    title: {
        color: `#fff`,
        fontSize: 20,
        fontWeight:`700`
    },
    rightStyle: {
        height: `100%`,
        right: 18,
        top: 0,
        justifyContent: `center`,
        position: `absolute`
    }
}) as any;